<template>
	<div class="wy-main corp-my">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">我的主页</span>
					<router-link to="/corp/my/business">
						<a class="title-button">工商信息</a>
					</router-link>
					<router-link to="/corp/my/standard">
						<a class="title-button">企业主业内容规范</a>
					</router-link>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<a-row style="margin-top: 10px;">
			<a-col :span="12">
				<h3>企业信息完善度</h3></a-col>
		</a-row>
		<a-row style="margin-top: 10px;">
			<a-progress :percent="30" />
			<p>完善企业信息，提升企业公信力，获取更多商机。</p>
		</a-row>
		<a-row class="tips">
			<a-col :span="12">
				<p><b>基本信息</b></p>
			</a-col>
		</a-row>
		<div style="padding: 20px;">
			<a-row>
				<a-col :span="4">
					<p>企业名称：</p>
				</a-col>
				<a-col :span="12">
					<p>北京荣之联科技股份有限公司</p>
				</a-col>

			</a-row>
			<a-row>
				<a-col :span="4">
					<p>企业logo：</p>
				</a-col>
				<a-col :span="12">
					<p>
						<a-avatar shape="square" :size="64" icon="user" />
					</p>
					<a-upload name="file" :multiple="true" action="//jsonplaceholder.typicode.com/posts/" :headers="headers" @change="handleChange">
						<a-button>
							<a-icon type="upload" /> 上传
						</a-button>
						<span>建议上传图片尺寸为640*640，大小不超过1M</span>
					</a-upload>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="4">
					<p>头部配图：</p>
				</a-col>
				<a-col :span="12">
					<p>
						<a-avatar shape="square" :size="64" icon="user" />
					</p>
					<a-upload name="file" :multiple="true" action="//jsonplaceholder.typicode.com/posts/" :headers="headers" @change="handleChange">
						<a-button>
							<a-icon type="upload" /> 上传
						</a-button>
						<span>建议上传图片尺寸为750*240，大小不超过1M</span>
					</a-upload>
				</a-col>
			</a-row>
		</div>

		<a-row class="tips">
			<a-col :span="16">
				<p><b>详细信息</b></p>
			</a-col>
			<a-col :span="8" style="text-align: right;">
				<a-button size="small">保存</a-button>
				<a-button size="small">修改</a-button>
			</a-col>
		</a-row>
		<div style="padding: 20px;">
			<a-row>
				<a-col :span="4">
					<p>公司简介：</p>
				</a-col>
				<a-col :span="12">
					<a-textarea placeholder="" :autosize="{ minRows: 4, maxRows: 6 }" />
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="4">
					<p>所属行业：</p>
				</a-col>
				<a-col :span="12">
					<p>科技推广应用</p>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="4">
					<p>所在地区：</p>
				</a-col>
				<a-col :span="12">
					<p>北京市北京市</p>
					<p>（如需修改，请在账户管理/基本资料中设置修改）</p>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="4">
					<p>认证信息：</p>
				</a-col>
				<a-col :span="12">
					<p>已认证</p>
					<p>（如需修改，请在账户管理/基本资料中设置修改）</p>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="16" :push='4'>
					<div>帮助客户快速了解企业的业务经营范围，最多可添加10个。填写自定义标签请遵守中国法律，并避免歧义，虚假或不恰当的标签会被删除。</div>
					<p>
						<a-tag color="blue">仓储</a-tag>
						<a-tag color="blue">人力资源交流</a-tag>
						<a-tag color="blue">物流方案设计</a-tag>
						<a-tag color="blue">代办报关手续</a-tag>
						<a-tag color="blue">货运信息中介</a-tag>
					</p>
				</a-col>
			</a-row>
		</div>
		<a-row class="tips">
			<a-col :span="20">
				<p><b>企业荣誉墙</b></p>
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="16" :push='2'>
				<div>添加企业获得的荣誉证书、奖杯、资质证明等，让客户充分了解企业的实力，提高企业可信度。</div>
				<div class="clearfix">
					<a-upload action="//jsonplaceholder.typicode.com/posts/" listType="picture-card" :fileList="fileList" @preview="handlePreview" @change="handleChange">
						<div v-if="fileList.length < 3">
							<a-icon type="plus" />
							<div class="ant-upload-text">Upload</div>
						</div>
					</a-upload>
					<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
						<img alt="example" style="width: 100%" :src="previewImage" />
					</a-modal>
				</div>
			</a-col>
		</a-row>
		<a-row class="tips">
			<a-col :span="20">
				<p><b>产品服务</b></p>
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="16" :push='2'>
				<div>发布企业能为客户提供的产品及服务，客户可以直接找到该产品的对外联系人。</div>
				<div class="clearfix">
					<a-upload action="//jsonplaceholder.typicode.com/posts/" listType="picture-card" :fileList="fileList" @preview="handlePreview" @change="handleChange">
						<div v-if="fileList.length < 3">
							<a-icon type="plus" />
							<div class="ant-upload-text">Upload</div>
						</div>
					</a-upload>
					<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
						<img alt="example" style="width: 100%" :src="previewImage" />
					</a-modal>
				</div>
			</a-col>
		</a-row>
		<a-row class="tips">
			<a-col :span="16">
				<p><b>联系方式</b></p>
			</a-col>
			<a-col :span="8" style="text-align: right;">
				<a-button size="small">保存</a-button>
				<a-button size="small">修改</a-button>
			</a-col>
		</a-row>
		<div style="width: 80%; margin: 10px auto;">
			<a-row type="flex" justify="space-around" align="middle">
				<a-col :span="6">
					<a-input placeholder="请填写业务名称" />
				</a-col>
				<a-col>
					业务负责人：
				</a-col>
				<a-col :span="6">
					<a-input placeholder="请选择联系人" />
				</a-col>
				<a-col>
					电话：
				</a-col>
				<a-col :span="6">
					<a-input placeholder="非必填" />
				</a-col>
				<a-col>
					<a-icon type="minus-circle" />
				</a-col>
			</a-row>
			<a-row type="flex" align="middle" style="margin-top: 10px;">
				<a-col :span="24">
					<a-icon type="plus-circle" />添加新的业务咨询项
				</a-col>
			</a-row>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				headers: {
					authorization: 'authorization-text',
				},
				previewVisible: false,
				previewImage: '',
				fileList: [{
					uid: '-1',
					name: 'xxx.png',
					status: 'done',
					url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
				}],
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		methods: {
			handleCancel() {
				this.previewVisible = false
			},
			handlePreview(file) {
				this.previewImage = file.url || file.thumbUrl
				this.previewVisible = true
			},
			//		    handleChange ({ fileList }) {
			//		      this.fileList = fileList
			//		    },
			// 上传图片
			handleChange(info) {
				if(info.file.status !== 'uploading') {
					console.log(info.file, info.fileList);
				}
				if(info.file.status === 'done') {
					this.$message.success(`${info.file.name} file uploaded successfully`);
				} else if(info.file.status === 'error') {
					this.$message.error(`${info.file.name} file upload failed.`);
				}
			},
			// 认证提交
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('Received values of form: ', values);
					}
				});
			},
			// 检测确认密码
			handleConfirmBlur(e) {
				const value = e.target.value;
				this.confirmDirty = this.confirmDirty || !!value;
			},
			// 检测确认密码
			compareToFirstPassword(rule, value, callback) {
				const form = this.form;
				if(value && value !== form.getFieldValue('password')) {
					callback('您输入的两个密码不一致!');
				} else {
					callback();
				}
			},
			// 检测密码		
			validateToNextPassword(rule, value, callback) {
				const form = this.form;
				if(value && this.confirmDirty) {
					form.validateFields(['confirm'], {
						force: true
					});
				}
				callback();
			},
		}
	}
</script>

<style lang="less" scoped>
	.corp-my {
		.tips {
			background: #ECEFF4;
			padding: 10px;
			p {
				margin: 0;
			}
		}
		.clearfix {
			margin-top: 10px;
		}
		.ant-upload-select-picture-card i {
			font-size: 32px;
			color: #999;
		}
		.ant-upload-select-picture-card .ant-upload-text {
			margin-top: 8px;
			color: #666;
		}
	}
</style>